<!--
  panel-property公共选项组件集合
  使用示例： <BaseOption :form="form" option="title" @change="titleChange"/>
-->
<template>
  <div class="base-option">
    <div v-if="option === 'echart'">
      <EchartProperty
        :form="form"
        :config="config"
        :echart-conf="echartConf"
      />
    </div>
    <VsFormItem
      v-if="option === 'title'"
      :label="label_"
      :prop="option"
    >
      <ValueInputer
        v-model:value="form.title"
        :placeholder="$demoi18n('placeholder.enterTitle')"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'placeholder'"
      :prop="option"
      :label="label_"
    >
      <el-input
        v-model="form.placeholder"
        :placeholder="$demoi18n('placeholder.enterPromptInfo')"
        size="default"
      ></el-input>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'unit'"
      :prop="option"
      :label="label_"
    >
      <el-input
        v-model="form.unit"
        :placeholder="$demoi18n('placeholder.enterUnit')"
        size="default"
      ></el-input>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'textComposition'"
      :prop="option"
      :label="label_"
    >
      <el-radio-group
        v-model="form.textComposition"
        size="default"
        :fill="activeColorRadio"
      >
        <el-radio label="horizontal">
          {{ $demoi18n('option.horizontalArrangement') }}
        </el-radio>
        <el-radio label="vertical">
          {{ $demoi18n('option.verticalArrangement') }}
        </el-radio>
      </el-radio-group>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'xAxisName'"
      :prop="option"
      :label="label_"
    >
      <el-input
        v-model="form.xAxisName"
        :placeholder="$demoi18n('placeholder.enterName')"
        size="default"
      ></el-input>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'yAxisName'"
      :prop="option"
      :label="label_"
    >
      <el-input
        v-model="form.yAxisName"
        :placeholder="$demoi18n('placeholder.enterName')"
        size="default"
      ></el-input>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'y0AxisName'"
      :prop="option"
      :label="label_"
    >
      <el-input
        v-model="form.y0AxisName"
        :placeholder="$demoi18n('placeholder.enterName')"
        size="default"
      ></el-input>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'y1AxisName'"
      :prop="option"
      :label="label_"
    >
      <el-input
        v-model="form.y1AxisName"
        :placeholder="$demoi18n('placeholder.enterName')"
        size="default"
      ></el-input>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'lineType'"
      :prop="option"
      :label="label_"
      required
    >
      <el-radio-group
        v-model="form.lineType"
        size="default"
        :fill="activeColorRadio"
      >
        <el-radio label="fillet">{{ $demoi18n('option.fillet') }}</el-radio>
        <el-radio label="acute">{{ $demoi18n('option.acuteAngle') }}</el-radio>
      </el-radio-group>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'componentType'"
      :label="label_"
    >
      <el-select
        v-model="form.componentType"
        :placeholder="$demoi18n('word.plsSelect')"
        size="default"
        @change="change"
      >
        <el-option
          v-for="(item, index) in componentTypeOption"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'barWidth'"
      :prop="option"
      :label="label_"
      :label-width="labelWidth || '85px'"
    >
      <Range
        v-model:value="form.barWidth"
        :min="10"
        :max="80"
        type="input"
      />
    </VsFormItem>
    <VsFormItem
      v-else-if="option === 'arrangement'"
      :prop="option"
      :label="label_"
      required
    >
      <el-radio-group
        v-model="form.arrangement"
        size="default"
        :fill="activeColorRadio"
        @change="change"
      >
        <el-radio label="parallel">
          {{ $demoi18n('option.parallelArrangement') }}
        </el-radio>
        <el-radio label="stack">
          {{ $demoi18n('option.stackArrangement') }}
        </el-radio>
      </el-radio-group>
    </VsFormItem>

    <VsFormItem
      v-show="form.barShow"
      v-else-if="option === 'barNum'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.barNum"
        :min="2"
        :max="24"
        type="input"
      />
    </VsFormItem>

    <template v-else-if="option === 'iconSize'">
      <VsFormItem
        :prop="option"
        :label="$demoi18n('panel.label.iconSize.width')"
      >
        <Range
          v-model:value="form.iconSize.width"
          :min="0"
          :max="1000"
          type="input"
        />
      </VsFormItem>
      <VsFormItem
        :prop="option"
        :label="$demoi18n('panel.label.iconSize.height')"
      >
        <Range
          v-model:value="form.iconSize.height"
          :min="0"
          :max="1000"
          type="input"
        />
      </VsFormItem>
    </template>

    <VsFormItem
      v-else-if="option === 'valueDisplay'"
      :label="label_"
    >
      <el-switch v-model="form.series.isLabelShow"></el-switch>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'componentStyle'"
      :prop="option"
      :label="label_"
      :rules="currentRule"
      :required="true"
    >
      <el-select
        v-model="form.componentStyle"
        :placeholder="$demoi18n('word.plsSelect')"
        size="default"
        @change="change"
      >
        <el-option :label="$demoi18n('panel.radio.light')" value="light"></el-option>
        <el-option :label="$demoi18n('panel.radio.dark')" value="dark"></el-option>
        <el-option v-if="xvueTheme !== 'dark' && !isVisualH5" :label="$demoi18n('componentStyle.real')" value="real"></el-option>
      </el-select>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'bodyWidthPercent'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.bodyWidthPercent"
        :min="20"
        :max="100"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'totalDecimalCount'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.totalDecimalCount"
        :min="0"
        :max="10"
        :tip="tip"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'tabPadding'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.tabPadding"
        :min="0"
        :max="1000"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'series.label.show'"
      :label="label_"
    >
      <el-switch v-model="form.series.label.show"></el-switch>
    </VsFormItem>
    <VsFormItem
      v-else-if="option === 'labelQuantity'"
      v-show="form.series.label.show"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.labelQuantity"
        :min="0"
        :max="100"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'padding.top'"
      :prop="option"
      :label="label_"
      required
    >
      <Range
        v-model:value="form.padding.top"
        :min="0"
        :max="1920"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'padding.left'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.padding.left"
        :min="0"
        :max="1920"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'padding.bottom'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.padding.bottom"
        :min="0"
        :max="1080"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'padding.right'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.padding.right"
        :min="0"
        :max="1920"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'xLabelRotate'"
      :prop="option"
      :label="label_"
      :title="$demoi18n('panel.labelTip.labelAngle')"
    >
      <Range
        v-model:value="form.xLabelRotate"
        :min="0"
        :max="360"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'chartPadding'"
      :prop="option"
      :label="label_"
      :title="$demoi18n('panel.labelTip.chartSpacing')"
    >
      <Range
        v-model:value="form.chartPadding"
        :min="0"
        :max="100"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'yAxisNameLeft'"
      :prop="option"
      :label="label_"
      :title="$demoi18n('panel.labelTip.labelDistance')"
    >
      <Range
        v-model:value="form.yAxisNameLeft"
        :min="0"
        :max="1080"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'fontSizeName'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.fontSizeName"
        type="input"
        :min="12"
        :max="45"
      />
    </VsFormItem>
    <VsFormItem
      v-else-if="option === 'fontSizeValue'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.fontSizeValue"
        type="input"
        :min="12"
        :max="45"
      />
    </VsFormItem>
    <VsFormItem
      v-else-if="option === 'fontSizeUnit'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.fontSizeUnit"
        type="input"
        :min="12"
        :max="45"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'imgSize'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.imgSize"
        type="input"
        :min="20"
        :max="200"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'groupImgSize'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.groupImgSize"
        type="input"
        :min="20"
        :max="200"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'visualMapSize'"
      :prop="option"
      :label="label_"
    >
      <el-input-number
        v-model="form.visualMap.size.width"
        class="input-number input-number-left"
        :min="0"
        :max="20"
        size="small"
      ></el-input-number>
      <el-input-number
        v-model="form.visualMap.size.height"
        class="input-number"
        :min="0"
        :max="400"
        size="small"
      ></el-input-number>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'carouselTime'"
      :prop="option"
      :label="label_"
    >
      <div class="carousel">
        <Range
          v-model:value="form.carouselTime"
          :min="1"
          :max="100"
          type="input"
        />
        <span>{{ $demoi18n('word.second') }}</span>
      </div>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'titleStyle.fontSize'"
      :label="label_"
      prop="titleStyle.fontSize"
    >
      <Range
        v-model:value="form.titleStyle.fontSize"
        type="input"
        :min="12"
        :max="45"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'titleStyle.aligns'"
      :label="label_"
      prop="titleStyle.aligns"
    >
      <el-radio-group v-model="form.titleStyle.aligns">
        <el-radio label="left">{{ $demoi18n('word.alignLeft') }}</el-radio>
        <el-radio label="center">{{ $demoi18n('option.align.center') }}</el-radio>
        <el-radio label="right">{{ $demoi18n('word.alignRight') }}</el-radio>
      </el-radio-group>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'lineStyle.fontSize'"
      :label="label_"
      prop="lineStyle.fontSize"
    >
      <Range
        v-model:value="form.lineStyle.fontSize"
        type="input"
        :min="12"
        :max="45"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'lineStyle.aligns'"
      :label="label_"
      prop="lineStyle.aligns"
    >
      <el-radio-group v-model="form.lineStyle.aligns">
        <el-radio label="left">{{ $demoi18n('word.alignLeft') }}</el-radio>
        <el-radio label="center">{{ $demoi18n('option.align.center') }}</el-radio>
        <el-radio label="right">{{ $demoi18n('word.alignRight') }}</el-radio>
      </el-radio-group>
    </VsFormItem>

    <BaseOptionColor
      v-else-if="colorOptions.includes(option)"
      :config="config"
      :form="form"
      :prop="option"
      :color-group="colorGroup"
      :label="label"
      :color-themes-key="colorThemesKey"
      :color-key="option"
      :enum-prikey="enumPrikey"
    />

    <TooltipEditor
      v-else-if="option === 'tooltip'"
      :config="config"
      use-for="tooltip"
      :type="type"
      :cur-comp="curComp"
      :show-correlation="showCorrelation"
      :echart-vars="echartVars"
      @save="saveTooltip"
    />

    <VsFormItem
      v-else-if="option === 'tooltipHasLabel'"
      :prop="option"
      :label="label_"
    >
      <TooltipEditor
        :config="config"
        use-for="tooltip"
        :type="type"
        :show-correlation="showCorrelation"
        :echart-vars="echartVars"
        :exclude-vars="excludeVars"
        @save="saveTooltip"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'isSingleSerieMultiColor'"
      :label="label_"
      :helptip="$demoi18n('panel.labelTip.singleSerieMultiColor')"
    >
      <el-switch v-model="form.isSingleSerieMultiColor"></el-switch>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'symbolSizeMax'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.symbolSizeMax"
        :min="form.symbolSizeMin"
        :max="500"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'symbolSizeMin'"
      :prop="option"
      :label="label_"
    >
      <Range
        v-model:value="form.symbolSizeMin"
        :min="1"
        :max="form.symbolSizeMax"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'yAxisLabel'"
      :prop="option"
      :label="label_"
    >
      <AxisLablelEditor
        :btn-text="$demoi18n('panelProperty.btn.editVerticalAxisLabel')"
        :property="form"
        :conf="form.yAxisLabel"
        var="y"
        @save="saveYAxisLabel"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="optionIs('echart.__.splitLine.show')"
      :label="$demoi18n('panel.label.dividingLine')"
    >
      <el-checkbox v-model="form.echart.xAxis.splitLine.show">
        {{ $demoi18n('panel.option.horizontal') }}
      </el-checkbox>
      <el-checkbox v-model="form.echart.yAxis.splitLine.show">
        {{ $demoi18n('panel.option.vertical') }}
      </el-checkbox>
    </VsFormItem>

    <VsFormItem
      v-else-if="optionIs('echart.series.label.show')"
      :label="$demoi18n('panel.option.barLabel')"
    >
      <el-switch v-model="form.echart.series.label.show"></el-switch>
    </VsFormItem>

    <VsFormItem
      v-else-if="optionIs('echart.series.label.position') && form.echart.series.label.show"
      prop="echart.series.label.position"
      :label="$demoi18n('panel.label.barLabelPosition')"
    >
      <el-select
        v-model="form.echart.series.label.position"
        :class="'panel-data-select-' + xvueTheme"
        :popper-class="'select-poper-' + xvueTheme"
        size="default"
      >
        <el-option
          :label="$demoi18n('panel.option.top')"
          value="top"
        ></el-option>
        <el-option
          :label="$demoi18n('panel.option.inside')"
          value="inside"
        ></el-option>
        <el-option
          :label="$demoi18n('panel.option.insideTop')"
          value="insideTop"
        ></el-option>
        <el-option
          :label="$demoi18n('panel.option.left')"
          value="left"
        ></el-option>
        <el-option
          :label="$demoi18n('panel.option.right')"
          value="right"
        ></el-option>
      </el-select>
    </VsFormItem>

    <VsFormItem
      v-else-if="optionIs('echart.series.label.fontSize') && form.echart.series.label.show"
      prop="echart.series.label.fontSize"
      :label="$demoi18n('panel.label.barLabelSize')"
    >
      <Range
        v-model:value="form.echart.series.label.fontSize"
        :min="10"
        :max="45"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="optionIs('echart.series.label.color') && form.echart.series.label.show"
      prop="echart.series.label.color"
      :label="$demoi18n('panel.label.barLabelColor')"
    >
      <ColorPicker v-model:value="form.echart.series.label.color" />
    </VsFormItem>

    <VsFormItem
      v-else-if="optionIs('echart.yAxis.splitNumber')"
      prop="echart.yAxis.splitNumber"
    >
      <template #label>
        <span>
          <el-tooltip placement="top">
            <template #content>
              <div>{{ $demoi18n('panel.labelTip.yAxisSplitNumber') }}</div>
            </template>
            <span>{{ $demoi18n('panel.label.yAxisSplitNumber') }}</span>
          </el-tooltip>
        </span>
      </template>
      <Range
        v-model:value="form.echart.yAxis.splitNumber"
        :min="2"
        :max="10000"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'multiSortBy'"
      :prop="option"
    >
      <template #label>
        <span>
          <el-tooltip
            placement="left"
            :effect="xvueTheme"
            popper-class="multi_sort_tooltip"
          >
            <template #content>
              <div
                :style="{
                  background: xvueTheme === 'light' ? '#fff' : '#0a2436',
                }"
              >
                <img
                  v-if="xvueTheme === 'light'"
                  src="../images/multi_sort_desc_light.png"
                  alt
                />
                <img
                  v-if="xvueTheme === 'dark'"
                  src="../images/multi_sort_desc_dark.png"
                  alt
                />
              </div>
            </template>
            <span>
              {{ $demoi18n('panel.label.sort') }}
              <el-icon style="color:#ffce84"><InfoFilled /></el-icon>
            </span>
          </el-tooltip>
        </span>
      </template>
      <el-select
        v-model="form.multiSortBy"
        :class="'panel-data-select-' + xvueTheme"
        :popper-class="'select-poper-' + xvueTheme"
        size="default"
      >
        <el-option
          :label="$demoi18n('panel.option.nameOrder')"
          value="name"
        ></el-option>
        <el-option
          :label="$demoi18n('panel.option.returnValueOrder')"
          value="api"
        ></el-option>
        <el-option
          :label="$demoi18n('panel.option.valueSmallLarge')"
          value="y_asc"
        ></el-option>
        <el-option
          :label="$demoi18n('panel.option.valueLargeSmall')"
          value="y_desc"
        ></el-option>
      </el-select>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'showIcon'"
      :label="label_"
      :prop="option"
    >
      <el-radio-group v-model="form.showIcon">
        <el-radio :label="$demoi18n('panel.radio.withIcon')"></el-radio>
        <el-radio :label="$demoi18n('panel.option.withoutIcon')"></el-radio>
      </el-radio-group>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'sortType'"
      :label="label_"
      :prop="option"
    >
      <el-radio-group v-model="form.sortType">
        <el-radio :label="$demoi18n('panel.option.NShaped')"></el-radio>
        <el-radio :label="$demoi18n('panel.option.ZShaped')"></el-radio>
      </el-radio-group>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'alineStyle'"
      :prop="option"
      :label="label_"
    >
      <el-select
        v-model="form.alineStyle"
        :class="'panel-data-select-' + xvueTheme"
        :popper-class="'select-poper-' + xvueTheme"
        size="default"
        @change="sortTypeChange()"
      >
        <el-option
          v-for="(item, index) in alineStyleOptions"
          :key="'alineStyle' + index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </VsFormItem>

    <div v-else-if="isCssStyle(option)">
      <CssStyleEditor
        :css-style="cssStyleObj"
        :df-attrs="dfCssStyleAttrs"
        :option="option"
        :value-label="valueLabel"
        :hidden-fields="hiddenFields"
        :component-style="form.componentStyle"
        :cssStyleConf="cssStyleConf"
      />
    </div>

    <!-- 名称呈现 -->
    <template v-else-if="option === 'isFullLable'">
      <VsFormItem
        :prop="option"
        :label="$demoi18n(form[`${option}Name`])"
      >
        <el-radio
          v-model="form.isFullLable"
          class="form_radio_width"
          :label="false"
          :title="$demoi18n('panel.label.displayByNumberOfCharacters')"
        >
          {{ $demoi18n('panel.label.displayByNumberOfCharacters') }}
        </el-radio>
      </VsFormItem>
      <VsFormItem
        v-if="!form.isFullLable"
        prop="labelRow"
        :label="$demoi18n('echart.label.labelRow')"
      >
        <Range
          v-model:value="form.labelRow"
          :min="1"
          :max="100000000"
          type="input"
        />
      </VsFormItem>
      <VsFormItem
        v-if="!form.isFullLable"
        prop="labelLength"
        :label="$demoi18n('echart.label.labelLength')"
      >
        <Range
          v-model:value="form.labelLength"
          :min="2"
          :max="100000000"
          type="input"
        />
      </VsFormItem>
      <VsFormItem
        :prop="option"
        label=""
      >
        <el-radio v-model="form.isFullLable" :label="true">{{ $demoi18n('panel.label.displayByFullName') }}</el-radio>
      </VsFormItem>
    </template>

    <!-- 排序方式 -->
    <template v-else-if="option === 'sortingMode'">
      <VsFormItem
        :prop="option"
        :label="$demoi18n('rank.sortingMode')"
      >
        <el-radio v-model="form.sortingMode" label="desc">{{ $demoi18n('rank.sortingMode.progressDescending') }}</el-radio>
      </VsFormItem>
      <VsFormItem
        :prop="option"
        label=""
      >
        <el-radio v-model="form.sortingMode" label="asc">{{ $demoi18n('rank.sortingMode.progressAscending') }}</el-radio>
      </VsFormItem>
      <VsFormItem
        :prop="option"
        label=""
      >
        <el-radio v-model="form.sortingMode" label="dataReturn">{{ $demoi18n('rank.sortingMode.dataReturn') }}</el-radio>
      </VsFormItem>
    </template>

    <VsFormItem
      v-else-if="option === 'fontSize'"
      :label="label_"
      :prop="option"
    >
      <Range
        v-model:value="form[option]"
        :min="12"
        :max="45"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'baseMapType'"
      :label="label_"
      prop="baseMapType"
    >
      <el-radio-group
        v-model="form.baseMapType"
        size="default"
      >
        <el-radio label="noBaselayer">
          {{ $demoi18n('panel.option.noBaselayer') }}
        </el-radio>
        <el-radio label="URL">URL</el-radio>
      </el-radio-group>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'projection'"
      :label="label_"
      prop="projection"
    >
      <el-radio-group
        v-model="form.projection"
        size="default"
        :fill="activeColorRadio"
      >
        <el-radio label="EPSG:4326">4326</el-radio>
        <el-radio label="EPSG:3857">3857</el-radio>
      </el-radio-group>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'urlOrigin'"
      :label="label_"
      prop="urlOrigin"
    >
      <el-select
        v-model="form.urlOrigin"
        :placeholder="$demoi18n('word.plsSelect')"
        size="default"
      >
        <el-option
          :label="$demoi18n('panel.label.fromSystem')"
          value="select"
        ></el-option>
        <el-option
          :label="$demoi18n('panelData.dataFromType.custom')"
          value="input"
        ></el-option>
      </el-select>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'funnelLabel'"
      :label="label_"
      prop="label.position"
    >
      <el-select
        v-model="form.label.position"
        size="default"
      >
        <el-option
          label="left"
          value="left"
        ></el-option>
        <el-option
          label="right"
          value="right"
        ></el-option>
        <el-option
          label="inside"
          value="inside"
        ></el-option>
      </el-select>
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'minZoom'"
      :label="label_"
      prop="minZoom"
    >
      <Range
        v-model:value="form.minZoom"
        :min="0"
        :max="16"
        type="input"
        class="gisMapZoom"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'maxZoom'"
      :label="label_"
      prop="maxZoom"
    >
      <Range
        v-model:value="form.maxZoom"
        :min="0"
        :max="16"
        type="input"
        class="gisMapZoom"
      />
    </VsFormItem>

    <el-collapse-item
      v-if="option === 'noDataPromptSetting'"
      name="cssStyle.noDataPrompt"
    >
      <template #title>
        <slot name="title">
          <span>{{ $demoi18n('message.noDataPrompt') }}</span>
          <Helptip>{{ $demoi18n('message.noDataPromptTip') }}</Helptip>
        </slot>
      </template>
      <VsFormItem
        class="noDataPromptType"
      >
        <div>
          <el-radio v-model="form.noDataPromptType" label="defaultPrompt">{{ $demoi18n('message.defaultSystemPrompt') }}</el-radio><br />
          <el-radio v-model="form.noDataPromptType" label="noPrompt">{{ $demoi18n('message.noPrompt') }}</el-radio><br />
          <el-radio v-model="form.noDataPromptType" label="customPrompt">{{ $demoi18n('message.customPrompts') }}</el-radio>
        </div>
      </VsFormItem>
      <VsFormItem
        v-if="form.noDataPromptType === 'customPrompt'"
        class="noDataPrompt"
        prop="noDataPrompt"
        :rules="genNoDataPromptRules()"
      >
        <el-input
          v-model="form.noDataPrompt"
          :placeholder="$demoi18n('message.pleaseEnterACustomPrompt')"
          type="textarea"
          maxlength="20"
          show-word-limit
        ></el-input>
      </VsFormItem>
    </el-collapse-item>

    <!-- =========== 下面几个是公用抽象代码块 =========== -->

    <VsFormItem
      v-else-if="fieldType === 'switch'"
      :label="label_"
      :prop="option"
      :helptip="helptip"
    >
      <el-switch v-model="form[option]"></el-switch>
    </VsFormItem>

    <VsFormItem
      v-else-if="fieldType === 'input'"
      :label="label_"
      :prop="option"
    >
      <el-input
        v-model="form[option]"
        size="default"
      ></el-input>
    </VsFormItem>

    <VsFormItem
      v-else-if="fieldType === 'inputNumber'"
      :label="label_"
      :prop="option"
    >
      <el-input-number
        v-model="form[option]"
        size="small"
        :max="max"
        :min="min"
        :precision="precision"
        :controls="false"
      ></el-input-number>
    </VsFormItem>

    <VsFormItem
      v-else-if="fieldType === 'color'"
      :label="label_"
      :prop="option"
    >
      <ColorPicker
        v-model:value="form[option]"
        :component-style="form.componentStyle"
        :df-color="dfColor"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="fieldType === 'radio'"
      :label="label_"
      :prop="option"
    >
      <el-radio-group
        v-model="form[option]"
        size="default"
      >
        <el-radio
          v-for="(n, i) in options"
          :key="i"
          :label="n.value"
        >
          {{ n.label }}
        </el-radio>
      </el-radio-group>
    </VsFormItem>

    <VsFormItem
      v-else-if="fieldType === 'number'"
      :label="label_"
      :prop="option"
    >
      <Range
        v-model:value="form[option]"
        :min="min"
        :max="max"
        type="input"
      />
    </VsFormItem>

    <VsFormItem
      v-else-if="option === 'selectNewStyle'"
      :label="label_"
      prop="selectNewStyle"
    >
      <el-select
        v-model="form.selectNewStyle"
        size="default"
      >
        <el-option
          label="A"
          value="A"
        ></el-option>
        <el-option
          label="B"
          value="B"
        ></el-option>
      </el-select>
    </VsFormItem>
  </div>
</template>
<script>
import Range from '../../common/range/range.vue';
import TooltipEditor from '@/components/common/tooltip/tooltip-editor.vue';
import BaseOptionColor from './base-option-color.vue';
import AxisLablelEditor from '@/components/common/axis-label/axis-label-editor.vue';
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import echartUtil from '@/components/common/echart/echart-util.js';
import CssStyleEditor from '@/components/common/css-style-editor/css-style-editor.vue';
import EchartProperty from '@/components/common/echart/echart-property.vue';
import Helptip from '@/components/common/helptip/helptip.vue';
import { $demoi18n } from '@/utils/lang';
import { objHas } from '@/utils/util';
import VsFormItem from '@/components/common/vs-form-item/vs-form-item.vue';
import { genNoDataPromptRules } from '@/utils/rules';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';

const isObj = variable => Object.prototype.toString.call(variable) === '[object Object]';

const fieldConf = {
  title: { label: $demoi18n('word.title'), type: '' },
  placeholder: { label: $demoi18n('label.promptInformation'), type: '' },
  unit: { label: $demoi18n('word.unit'), type: '' },
  textComposition: { label: $demoi18n('label.typesetting'), type: '' },
  xAxisName: { label: $demoi18n('label.horizontalAxisName'), type: '' },
  yAxisName: { label: $demoi18n('label.verticalAxisName'), type: '' },
  y0AxisName: { label: $demoi18n('label.leftAxisName'), type: '' },
  y1AxisName: { label: $demoi18n('label.rightAxisName'), type: '' },
  lineType: { label: $demoi18n('lebel.brokenLineType'), type: '' },
  shadow: { label: $demoi18n('label.shadow'), type: 'switch' },
  barShow: { label: $demoi18n('label.bottomSlider'), type: 'switch' },
  barNum: { label: $demoi18n('label.xAxisGroupCount'), type: '' },
  componentType: { label: $demoi18n('panelProperty.label.componentStyle'), type: '' },
  barWidth: { label: $demoi18n('label.BarWith'), type: '' },
  arrangement: { label: $demoi18n('label.barArrangement'), type: '' },
  legend: { label: $demoi18n('panel.label.legend'), type: 'switch' },
  componentStyle: { label: $demoi18n('panel.label.componentStyle'), type: '' },
  bodyWidthPercent: { label: $demoi18n('panel.label.piePercent'), type: '' },
  totalDecimalCount: { label: $demoi18n('panel.label.totalDecimal'), type: '' },
  tabPadding: { label: $demoi18n('panel.label.titleBottomMargin'), type: '' },
  'series.label.show': { label: $demoi18n('panel.label.dataDisplay'), type: 'switch' },
  labelQuantity: { label: 'TOP', type: '' },
  'padding.top': { label: $demoi18n('word.paddingTop'), type: '' },
  'padding.left': { label: $demoi18n('panel.label.leftAxisMargin'), type: '' },
  'padding.bottom': { label: $demoi18n('panel.label.bottomAxisMargin'), type: '' },
  'padding.right': { label: $demoi18n('panel.label.rightAxisMargin'), type: '' },
  shapePaddingRight: { label: $demoi18n('panel.label.rightAxisMargin'), type: 'number' },
  xLabelRotate: { label: $demoi18n('panel.label.labelAngle'), type: '' },
  chartPadding: { label: $demoi18n('panel.label.chartSpacing'), type: '' },
  yAxisNameLeft: { label: $demoi18n('panel.label.labelDistance'), type: '' },
  fontSizeName: { label: $demoi18n('label.fontSize.name'), type: '' },
  fontSizeValue: { label: $demoi18n('label.fontSize.value'), type: '' },
  fontSizeUnit: { label: $demoi18n('label.fontSize.unit'), type: '' },
  imgSize: { label: $demoi18n('panel.label.imgSize'), type: '' },
  groupImgSize: { label: $demoi18n('panel.label.groupImgSize'), type: '' },
  visualMapSize: { label: $demoi18n('panel.lab.visualMapSize'), type: '' },
  isCarouselOn: { label: $demoi18n('panel.label.autoCarousel'), type: 'switch' },
  carouselTime: { label: $demoi18n('panel.laebl.carouselInterval'), type: '' },
  'titleStyle.fontSize': { label: $demoi18n('panel.label.fontSize'), type: '' },
  'titleStyle.aligns': { label: $demoi18n('panel.label.alignment'), type: '' },
  'lineStyle.fontSize': { label: $demoi18n('panel.label.fontSize'), type: '' },
  'lineStyle.aligns': { label: $demoi18n('panel.label.alignment'), type: '' },
  tooltipHasLabel: { label: 'Tooltip', type: '' },
  symbolSizeMax: { label: $demoi18n('panel.label.maxScatter'), type: '' },
  symbolSizeMin: { label: $demoi18n('panel.label.minScatter'), type: '' },
  yAxisLabel: { label: $demoi18n('panel.label.verticalAxisLabel'), type: '' },
  fontColor: { label: $demoi18n('panel.label.fontColor'), type: 'color' },
  showIcon: { label: $demoi18n('panel.label.icon'), type: '' },
  sortType: { label: $demoi18n('panel.typeSetting.valuePreOrder'), type: '' },
  alineStyle: { label: $demoi18n('panel.label.arrangement'), type: '' },
  fontSize: { label: $demoi18n('word.fontSize'), type: '' },
  backgroundColor: { label: $demoi18n('panel.label.backgroundColor'), type: 'color' },
  baseMapType: { label: $demoi18n('panel.label.baselayer'), type: '' },
  projection: { label: $demoi18n('panel.label.coordinateSystemType'), type: '' },
  urlOrigin: { label: $demoi18n('panel.label.mapSource'), type: '' },
  fontVisible: { label: $demoi18n('word.fontDisplay'), type: 'switch' },
  url: { label: 'URL', type: 'input' },
  origin: { label: 'origin', type: 'input' },
  resolutions: { label: 'resolutions', type: 'input' },
  minZoom: { label: $demoi18n('panel.label.minZoom'), type: '' },
  maxZoom: { label: $demoi18n('panel.label.maxZoom'), type: '' },
  lineDash: { label: $demoi18n('panel.label.regionBounaryStyle'), type: 'radio' },
  defaultPageSize: { label: $demoi18n('panel.label.defaultPageSize'), type: 'inputNumber' },
  isGroupInfoVisiable: { label: $demoi18n('panel.label.groupDisplay'), type: 'switch' },
  isDatasetVisiable: { label: $demoi18n('panel.label.datasetDisplay'), type: 'switch' },
  ringBackground: { label: $demoi18n('panel.label.ringBgColor'), type: 'color' },
  maxBubbleSize: { label: $demoi18n('word.maxBubbleSize'), type: 'number' },
  minBubbleSize: { label: $demoi18n('word.minBubbleSize'), type: 'number' },
  maxLineLen: { label: $demoi18n('word.maxLineLen'), type: 'number' },
  minLineLen: { label: $demoi18n('word.minLineLen'), type: 'number' },
  funnelLabel: { label: $demoi18n('echart.setting.funnelLabelPosition'), type: 'select' },
  optionGap: { label: $demoi18n('word.optionSpacing'), type: 'number' },
  optionMaxWidth: { label: $demoi18n('word.optionMaxWidth'), type: 'number' },
  optionMinWidth: { label: $demoi18n('word.optionMinWidth'), type: 'number' },
  maxNumOneLine: { label: $demoi18n('word.maxColumn'), type: 'number' },
  maxNumOneRow: { label: $demoi18n('word.maxRow'), type: 'number' },
  selectNewStyle: { label: $demoi18n('panel.typeSetting.typeSelect'), type: 'select' },
  isTitleSignVisiable: { label: $demoi18n('label.title.showVerticalLine'), type: 'switch' },
  signMarginLeft: { label: $demoi18n('label.title.leftMarginOfVerticalLine'), type: 'number' },
  verticalLineBackgroundColor: { label: $demoi18n('label.title.verticalLineColor'), type: 'color' },
  dialogBackgroundColor: { label: $demoi18n('label.title.dialogBackgroundColor'), type: 'color' },
  hideRightChart: { label: $demoi18n('label.title.hideRightChart'), type: 'switch' },
  isSearch: { label: '', type: 'switch' }, // 卡片指标表单搜索支持
  isFunction: { label: '', type: 'switch' }, // 卡片指标表单功能支持
  selectFunction: { label: '', type: 'radio' }, // 卡片指标表单功能选择
  tagMaxWidth: { label: '', type: 'number' }, // 卡片指标表单功能选择
  lineTextVisiable: { label: $demoi18n('panel.option.renderBorderText'), type: 'switch' },
  bubbleLineExpand: { label: $demoi18n('panel.option.bubbleDisplay'), type: 'switch' },
  borderSize: { label: $demoi18n('panel.label.borderSize'), type: 'inputNumber' },
  offsetX: { label: $demoi18n('panel.label.offsetX'), type: 'inputNumber' },
  offsetY: { label: $demoi18n('panel.label.offsetY'), type: 'inputNumber' },
  shadowRadius: { label: $demoi18n('panel.label.shadowRadius'), type: 'inputNumber' },
  borderColor: { label: $demoi18n('word.borderColor'), type: 'color' },
  isShadowVisiable: { label: $demoi18n('panel.label.shadowing'), type: 'switch' },
};

export default {
  name: 'BaseOption',
  components: {
    Range,
    TooltipEditor,
    BaseOptionColor,
    AxisLablelEditor,
    ColorPicker,
    CssStyleEditor,
    EchartProperty,
    Helptip,
    VsFormItem,
    ValueInputer,
  },
  props: {
    form: Object,
    option: String,
    config: Object, // 选传，在tooltip编辑用
    type: String, // 选传，类型
    label: String, // 选项左侧文字
    labelWidth: String,
    max: Number, // 选传，数值类上限
    min: Number, // 选传，数值类下限
    precision: Number, // 选传，数值类精度
    defaultVal: [String, Number, Boolean],

    // 饼图总计小数使用
    tip: String,

    // tooltip使用
    showCorrelation: {
      type: Boolean,
      default: true,
    },
    echartVars: Object,
    excludeVars: Array,

    // 颜色主题用
    colorGroup: Object, // 选传，颜色主题使用
    colorThemesKey: {
      type: String,
      default: 'colorThemes',
    },
    enumPrikey: String, // 自定义颜色主题下拉选择字段名

    // css属性选项
    dfCssStyleAttrs: {
      type: Object,
      default: () => ({
        color: null,
        fontSize: 11,
        fontWeight: 'normal',
        textAlign: 'left',
        backgroundColor: 'transparent',
        fontFamily: 'unset',
      }),
    },
    hiddenFields: {
      type: Array,
      default: () => [],
    },

    cssStyleKey: String,
    echartConf: Object,
    alineStyleOptions: Array,
    valueLabel: String,
    componentTypeOption: Array,

    // 左表右xx组件区分图表专用
    curComp: String,

    // 选色器默认颜色
    dfColor: {
      type: Object,
      default: () => ({}),
    },

    // 多选项
    options: {
      type: Array,
      default: () => [],
    },
    currentRule: {
      type: Array,
      default: ()=>null,
    },
    cssStyleConf: {
      type: Object,
      default: () => null,
    },
    helptip: {
      type: String,
      default: '',
    },
  },
  emits: ['change', 'sortTypeChange'],
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme, // 'dark',
      label_: '',
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      colorOptions: [
        // 颜色组件白名单
        'color',
        'iconColor',
        'contentGradientColor',
      ],
      cssStyleObj: {}, // 等于 form.cssStyle.xxx
    };
  },
  computed: {
    fieldType() {
      const n = fieldConf[this.option] || {};
      return n.type;
    },
  },
  watch: {
    'form.componentStyle'() {
      this.initEchartColor();
    },
  },
  created() {
    this.initLabel();
  },
  methods: {
    genNoDataPromptRules,
    initLabel() {
      this.label_ = this.label || (fieldConf[this.option] && fieldConf[this.option].label);
    },
    change() {
      this.$emit('change', this.form[this.option]);
    },
    saveTooltip(tooltip) {
      // 左表右xx组件特殊处理
      if (this.curComp) {
        this.form.tooltip[this.curComp] = tooltip;
      } else {
        this.form.tooltip = tooltip;
      }
    },
    saveYAxisLabel(conf) {
      this.form.yAxisLabel = conf;
    },

    sortTypeChange() {
      this.$emit('sortTypeChange');
    },

    getEchartDfVal(option) {
      let val = echartUtil.getDfVal(option) || this.defaultVal;
      if (isObj(val)) {
        const componentStyle = this.form.componentStyle || window._adoPremise.uc.theme || 'light';
        if (val[componentStyle]) {
          val = val[componentStyle];
        }
      }
      return val;
    },

    // 如果属性是属性路径，如（series.label.show），对其初始化
    initPathProp(option) {
      const _option = option || this.option;
      if (_option.includes('.') && _option.indexOf('echart') === 0) {
        if (_option === 'echart.__.splitLine.show') {
          this.initPathProp('echart.xAxis.splitLine.show');
          this.initPathProp('echart.yAxis.splitLine.show');
          return;
        }

        echartUtil.register(_option, this.form, this);
      }
    },

    optionIs(key) {
      this.initPathProp();
      return this.option === key;
    },

    hasOption(option) {
      let val = this.form;
      const arr = option.split('.'); // 例如：series.label.show
      const len = arr.length;
      for (let i = 0; i < len; i++) {
        const key = arr[i];
        if (!objHas(val, key)) {
          return false;
        }
        val = val[key];
      }
      return true;
    },

    setEchartVal(option, value) {
      let { form } = this;
      const arr = option.split('.'); // 例如：series.label.show
      const len = arr.length;
      for (let i = 0; i < len; i++) {
        const key = arr[i];
        if (!objHas(form, key)) {
          let val;
          if (i === len - 1) {
            val = value;
          } else {
            val = {};
          }
          form[key] = val;
        }
        if (i === len - 1) {
          form[key] = value;
        }
        form = form[key];
      }
    },

    initEchartColor() {
      if (window.colorWatchLock) {
        // 防止多个base-option组件多次执行

      } else {
        window.colorWatchLock = true;
        setTimeout(() => {
          delete window.colorWatchLock;
        }, 100);

        // 切换主题后颜色初始化
        const arr = [
          'echart.xAxis.splitLine.lineStyle.color',
          'echart.yAxis.splitLine.lineStyle.color',
          'echart.series.label.color',
        ];
        for (let i = 0; i < arr.length; i++) {
          const option = arr[i];
          if (this.hasOption(option)) {
            const { componentStyle } = this.form;
            if (componentStyle) {
              const color = echartUtil.getDfColor(option, componentStyle);
              this.setEchartVal(option, color);
            }
          }
        }
      }
    },

    isCssStyle(option) {
      // 如：cssStyle.layoutBox
      if (option.indexOf('cssStyle') === 0) {
        let { form } = this;
        const arr = option.split('.');
        const len = arr.length;
        for (let i = 0; i < len; i++) {
          const key = arr[i];
          if (!objHas(form, key)) {
            form[key] = {};
          }
          form = form[key];
        }
        this.cssStyleObj = form;
        return true;
      }
      return false;
    },
  },
};
</script>
<style lang="less" scoped>
.base-option {
  :deep(.el-form-item) {
    margin-bottom: 0;
    .el-form-item__content {
      display: flex;
      min-height: 40px;
      align-items: center;
    }
  }
  .input-number {
    width: 80px;
    :deep(.el-input-number__decrease) {
      width: 19px;
      background-color: #fff;
    }
    :deep(.el-input-number__increase) {
      width: 19px;
      background-color: #fff;
    }
    :deep(.el-input__inner) {
      padding-left: 19px;
      padding-right: 19px;
    }
  }
  .input-number-left {
    margin-right: 25px;
  }
  .carousel {
    display: flex;
  }
  .noDataPromptType {
    margin-left: 15px;
  }
  .noDataPrompt {
    margin-left: 10px;
    margin-right: 10px;
  }
  .gisMapZoom {
    :deep(.el-input-number) {
      height: 28px;
    }
  }
  .form_radio_width {
    width: 100%;
    :deep(.el-radio__label) {
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
<style lang="less">
.multi_sort_tooltip {
  max-width: 2000px !important;
}
</style>
